<template>
	<view class="app">
		<load :ready="ready"></load>
		<view class="fixed-head">
			<u-tabs :list="navlist" active-color="#497CD0" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
		</view>
		<u-gap height="80"></u-gap>
		<view class="order-list">
			<view class="order-item" v-for="(item, index) in list" :key="item.id">
				<view class="order-head">
					<text class="num">订单号：{{item.order_sn}}</text>
				</view>

				<view class="goods-list" @click="link(`./order_info?id=${item.id}`)">
					<view class="goods-item" v-for="(goods, idx) in item.goods">
						<u-image :src="goods.image" border-radius="16" width="128" height="128"></u-image>
						<view class="info">
							<view class="goods-name txt-hide">{{goods.goods_name}}</view>
							<view class="attr">
								{{goods.description}}
							</view>
							<view class="price">¥<text>{{goods.goods_price}}</text></view>
						</view>
					</view>
				</view>
				<view class="order-foot">
					<view class="left">
						实际付款金额
						<text>¥{{item.order_amount}}</text>
					</view>
					<view class="btnbox">
						<view class="btns" style="width: 164rpx;">
							<u-button class="btn" @click="link(`./order_info?id=${item.id}`)" type="primary"
								:custom-style="btnStyle" size="medium">查看详情</u-button>
						</view>
					</view>
				</view>
			</view>


		</view>


		<list-tip :notData="listTip.notData" :isPage="listTip.isPage" :isLoading="listTip.isLoading">
			<u-empty slot="notdata" text="暂无数据" margin-top="100"></u-empty>
		</list-tip>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {},
		data() {
			return {
				// ready: true,
				navlist: [{
					name: '待配送',
					id: 1,
				}, {
					name: '已完成',
					id: 2,
				}, ],
				current: 0,
				btnStyle: {
					background: '#497CD0',
					borderRadius: '16px',
					padding: '0 15px',
				},
				list: [],
				listTip: {},
				orderSn: '',
				info: {},
				total: '',
			};
		},
		onLoad(o) {
			if (o.current) {
				this.current = o.current
			}
			that = this;
		},
		onReady() {},
		onShow() {
			this.$list.init(this);
			this.getList();
		},
		onUnload() {
			that = null;
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.$list.onReachBottom(this)
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			handlePrint(item, index) {
				this.$common.showTip('功能开发中')
			},
			onSearch() {
				this.$list.init(this);

				this.getList();
			},
			async getList() {
				let listTip = this.listTip;
				let res = {};
				let params = {
					pageNum: listTip.p,
					pageSize: listTip.size,
					status: this.navlist[this.current].id,
					// order_status:0,
				};
				// if(this.current>0){
				// 	params.order_status= this.navlist[this.current].id
				// }
				try {
					res = await this.$api.orderList(params);
				} catch (e) {
					uni.hideLoading();
					console.log('err', e);
				}
				if (res.data.code == this.$config.RESOK) {
					let list = res.data.data.data || [];
					list.forEach(item => {
						item.goods.forEach(goods => {
							// goods.image = this.$config.httpImgs + goods.image
						})
					})
					let setdata = this.$list.normalData(list, this);
					this.list = setdata.list;
					this.listTip = setdata.listTip;
					this.total = res.data.data.total;
					if (setdata.list.length >= res.data.total && listTip.p > 1 || !list.length) {
						this.$list.notdata(this);
					}
				}
			},
			change(e) {
				console.log(e);
				this.current = e;
				this.$list.init(this);

				this.getList();
			},
			handleTab(e) {
				this.tab = e;
				this.$list.init(this);

				this.$nextTick(() => {
					this.current = 0
					this.getList();
				})
			},
			...mapActions([])
		},
		computed: {
			...mapState({
				userInfo: 'userInfo'
			})
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: $uni-bg-color-grey;
	}

	.tab-wrap {
		display: flex;
		width: 100%;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 2px solid #eee;

		.tab-item {
			width: 50%;
			font-size: 16px;

			&.active {
				border-bottom: 4px solid $color;
				color: $color;
			}
		}
	}

	.fixed-head {
		padding: 0 30rpx;
		background: #fff;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 99;
	}

	.searchbox {
		display: flex;
		height: 80rpx;
		align-items: center;
		background: #F6F8FB;
		padding: 0 20rpx;
		margin: 10rpx 0 0;
		border-radius: 5px;

		.icon {
			width: 20px;
			height: 20px;
		}

		.input {
			font-size: 15px;
			padding: 0 20rpx;
			flex: 1;
		}

		.btn-search {
			background: $color;
			color: #fff;
			border-radius: 5px;
			height: 60rpx;
			line-height: 60rpx;
			width: 120rpx;
			text-align: center;
		}
	}

	.h260 {
		height: 260rpx;
	}

	.h170 {
		height: 170rpx;
	}

	.order-list {
		padding: 20rpx 30rpx 0;

		.order-item {
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 12px;
			padding: 0 30rpx;

			&.package {
				background: #f1f7fd;
			}
		}

		.order-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;
		}

		.order-foot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.left {
				font-size: 14px;

				text {
					color: $color-red;
					font-size: 16px;
				}
			}
		}

		.btnbox {
			display: flex;

			.btns {
				margin-left: 5px;
			}
		}
	}


	.goods-list {
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		padding: 10rpx 0;

		.goods-item {
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
		}

		.info {
			flex: 1;
			width: 480rpx;
			padding-left: 20rpx;
		}

		.goods-name {
			line-height: 26px;
			font-size: 14px;
			font-weight: bold;
		}

		.attr {
			font-size: 12px;
			color: #979797;
			margin-bottom: 2px;
		}

		.price {
			font-size: 12px;
			color: $color-red;

			text {
				font-size: 15px;
			}
		}

		.desc {
			display: flex;
			justify-content: space-between;
		}
	}
</style>